/**
 * Created by liubin on 2015/10/4.
 */
'use strict';

import React from 'react';
import ReactMixin from 'react-mixin';
import { Link } from 'react-router';
import Autobind from 'tools/autobindMixin';
import $ from 'jquery';

@ReactMixin.decorate(Autobind)
class UserView extends React.Component {
    static propTypes = {
        userActions: React.PropTypes.object,
        roleActions: React.PropTypes.object,
        userStore: React.PropTypes.object,
        history: React.PropTypes.object.isRequired,
        params: React.PropTypes.object.isRequired
    }
    constructor(props) {
        super(props);
    }

    /**
     * 渲染 xeditable
     */
    renderEditable() {
        // 绑定更新函数
        const name = React.findDOMNode(this.refs.name);
        //const name = React.findDOMNode(this.refs.name);
        const { userActions: { modifyUser }, roleActions: { selectCombo }, userStore } = this.props;
        let user = userStore.get('user');
        $(name).editable({
            mode: 'popup',
            url: params => {
                const d = new $.Deferred;
                user = user.set('name', params.value);
                modifyUser(user, d);
            }
        });
    }

    /**
     * 渲染权限下拉
     */
    renderRoleCombo() {
        const roleId = React.findDOMNode(this.refs.roleId);
        const {  userActions: { modifyUser }, roleStore, userStore } = this.props;
        let comboList = roleStore.get('comboList');
        comboList = comboList.map(item => {
            return {
                value: item.get('id'),
                text: item.get('name')
            };
        });
        comboList = comboList.toJS();
        let user = userStore.get('user');
        $(roleId).editable({
            mode: 'popup',
            source: comboList,
            url: params => {
                const d = new $.Deferred;
                user = user.set('roleId', params.value);
                modifyUser(user, d);
            }
        });
    }
    componentDidMount() {
        const { userActions: { getUser }, roleActions: { selectCombo }, params: { id } } = this.props;
        getUser(id, this.renderEditable);
        selectCombo(this.renderRoleCombo);
    }
    render(){
        const { userStore } = this.props;
        const { roleStore } = this.props;
        const comboList = roleStore.get('comboList');
        const role = comboList.find(value => {
            if ( userStore.getIn(['user', 'roleId']) ===  value.id) {
                return true;
            } else {
                return false;
            }
        });
        return (
            <Grid>
                <Row>
                    <Col sm={12}>
                        <Breadcrumb>
                            <BLink><Link to='/'>主页</Link></BLink>
                            <BLink><Link to='/user'>用户</Link></BLink>
                            <BLink active>用户编辑</BLink>
                        </Breadcrumb>
                    </Col>
                </Row>
               <Row>
                   <Col sm={10} md={9} lg={8}>
                       <PanelContainer plain className='plain-panel' controlStyles='bg-blue fg-white'>
                            <PanelHeader className='bg-blue fg-white'>
                                <Grid>
                                    <Row>
                                        <Col xs={12}>
                                            <h4>用户编辑</h4>
                                        </Col>
                                    </Row>
                                </Grid>
                            </PanelHeader>
                            <PanelBody style={{paddingBottom: 10}}>
                                <Grid>
                                    <Row>
                                        <Col xs={12}>
                                            <Table striped bordered style={{margin: 0}}>
                                                <tbody>
                                                    <tr>
                                                      <td style={{width: 300}}>账号</td>
                                                      <td>
                                                          {userStore.getIn(['user', 'userId'])}
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td style={{width: 300}}>用户名</td>
                                                      <td>
                                                        <a ref='name' href='javascript:' className='xeditable' data-type='text' data-title='用户名:'>{userStore.getIn(['user', 'name'])}</a>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td style={{width: 300}}>权限</td>
                                                      <td>
                                                        <a ref='roleId' href='javascript:' className='xeditable' data-type="select" data-title='权限:' data-value={userStore.getIn(['user', 'roleId'])}>{role && role.name || ''}</a>
                                                      </td>
                                                    </tr>
                                                </tbody>
                                            </Table>
                                        </Col>
                                    </Row>
                                </Grid>
                            </PanelBody>
                        </PanelContainer>
                   </Col>
               </Row>
           </Grid>
        );
    }
}
export default UserView;